<template>
    <div class="ad-detail" v-if='orderInfo'>
        <div class="left">
            <header class="s-b" v-if='$store.state.isPc' @click='toUserDetail(orderInfo.user_id)'>
                <div class="user-info" >
                    <div class="f-s avatar">
                        <img :src="orderInfo.avatar" alt="头像">
                        <span>{{orderInfo.nickname}}</span>-
                        <span>{{orderInfo.auth_status | userAuth}}</span>
                    </div>
                    <div class="info">
                        <h1>{{orderInfo.trade_times}}</h1>
                        <p>交易次數</p>
                    </div>
                    <div class="info">
                        <h1>{{orderInfo.praise_rate}}%</h1>
                        <p>好評</p>
                    </div>
                </div>
                <!-- <el-button type='primary' size="mini" @click='showContact = true'>聯系對方</el-button> -->
            </header>
            <header v-else class="s-b">
                 <div class="s-b avatar">
                    <img :src="require('@ast/imgs/1.png')" alt="">
                    <div class="user-info">
                        <p>nicheng</p>
                        <p>
                            <span>交易次數 1-30</span>
                            <span>好評 100%</span>
                        </p>
                    </div>
                </div>
                <el-button type='primary' size="mini" @click='showContact = true'>聯系對方</el-button>
            </header>
            <div class="ad-inf">
                <h1>
                    通過
                    {{orderInfo.pay_type[0].title}}
                    使用
                    {{orderInfo.currency}}
                    {{$route.params.tradeType == 'buy' ? '購買' : '出售'}}
                    {{orderInfo.code}}
                </h1>
                <el-form label-width="120px" label-position='left'>
                    <el-form-item label='單價：'>
                        <div class="ad-msg unit-price" >{{orderInfo.price}}</div>
                    </el-form-item>
                    <el-form-item label='交易限額：'>
                        <div class="ad-msg">{{orderInfo.min_money}}-{{orderInfo.max_money}}{{orderInfo.currency}}</div>
                    </el-form-item>
                    <el-form-item label='支付方式：'>
                        <pay-type :pay-ment='orderInfo.pay_type'></pay-type>
                    </el-form-item>
                    <el-form-item label='付款期限：'>
                        <div class="ad-msg">{{orderInfo.trade_limit}}分钟</div>
                    </el-form-item>
                </el-form>
                <template v-if='$store.state.isPc'>
                    <!-- 购买或出售 -->
                    <h2>
                        {{$route.params.tradeType == 'buy' ? '你想要交易多少' : '你想要出售多少'}}
                    </h2>
                    <div class="s-b">
                        <el-input v-model="number" type="number" @input='number2coinHandle'>
                            <template slot="append">{{orderInfo.currency}}</template>
                        </el-input>
                        <span style="margin : 0 25px;margin-bottom: 15px;font-size:24px;line-height:40px;">
                            <i class="el-icon-sort"></i>
                        </span>
                        <el-input v-model="number2coin" type="number" @input='coin2numberHandle'>
                            <template slot="append">{{orderInfo.code}}</template>
                        </el-input>
                    </div>
                    <!-- <p>下单金额范围 <span class="text-color">4999-4999CNY</span></p> -->
                </template>
                <template v-else>
                    <div class="trade-number">
                        <h1>你想要交易多少</h1>
                        <p>下单金额范围 <span class="text-color">4999-4999CNY</span></p>
                        <div class="number-input">
                            <div class="item">
                                <span>金额(CNY)</span>
                                <el-input v-model="number" type="number"></el-input>
                            </div>
                            <div class="item">
                                <span>数量(BTC)</span>
                                <el-input></el-input>
                            </div>
                        </div>
                    </div>
                </template>
                <div class="tips die" v-if='tips'>
                    {{tips}}
                </div>
                <el-button type="primary" :disabled="disabled" @click='createOrder'>立即購買</el-button>
            </div>
            <div class="trade-notice">
                <h1>交易須知</h1>
                <p>1.交易前請詳細瞭解對方的交易資訊。</p>
                <p>2.請通過平臺進行溝通約定，並保存好相關聊天記錄。</p>
                <p>3.交易過程中，交易資產處於平臺的託管保護中，如遇到交易糾紛可請求平臺介入，詳情請查看“幫助”。</p>
                <p>4.在您發起交易請求後，BTC被鎖定在託管中，受到CoinCola保護。如果您是買家，發起交易請求後，請在付款週期內付款並把交易標記為付款已完成。賣家在收到付款後將會放行處於託管中的BTC。交易前請閱讀《CoinCola服務條款》以及常見問題、交易指南等幫助文檔。</p>
                <p>5.請注意欺詐風險，交易前請檢查該用戶收到的評估和相關信用資訊，並對新近創建的帳戶多加留意。</p>
                <p>6.託管服務保護網上交易的買賣雙方。在發生爭議的情况下，我們將評估所提供的所有資訊，並將託管的BTC放行給其合法所有者。</p>
            </div>
            <!-- <div class="other-ad" v-if='$store.state.isPc'>
                <h1>gamezhagn的其他广告</h1>
                <el-table 
                    :header-cell-style="{background : '#f1f1f1'}"
                    :data='table'>
                    <el-table-column label='币种' prop='one' width="320">
                    </el-table-column>
                    <el-table-column label='付款方式' prop='two'></el-table-column>
                    <el-table-column label='交易限额' prop='three' ></el-table-column>
                    <el-table-column label='价格' prop='four'></el-table-column>
                </el-table>
            </div> -->
        </div>
        <div class="right">
            <h1>廣告留言：</h1>
            <p>{{orderInfo.trade_content}}</p>
        </div>

        <!-- 联系对方 -->
        <!-- <div class="contact-saler" v-if='showContact'>
            <contact @close='closeContact'/>
        </div> -->
    </div>
</template>

<script>
    import Contact from '@c/Contact'
    import PayType from '@c/PayType'
    import  {GetAdDetail, CreateTradeOrder} from '@/api/ad'

    export default {
        components: {
            Contact,
            PayType
        },
        data() {
            return {
                table : null,
                showContact : true,
                orderInfo : null,//订单信息
                number : 0,
                number2coin : 0,
                tips : null,//数量输入错误时的提示
            };
        },
        mounted () {
            this.getAdDetail();
        },
        computed : {
            disabled () {
                return !(Number(this.number) >= this.orderInfo.min_money &&  Number(this.number) <= this.orderInfo.max_money)
            }
        },
        watch : {
            number (value) {    
                console.log('value :>> ', value);
                if (Number(value) < this.orderInfo.min_money) {
                    this.tips = '交易額必須大於最小交易額';
                    
                } else if (Number(value) > this.orderInfo.max_money) {
                    this.tips = '交易額必須小於最大交易額';
                } else {
                    this.tips = null
                }
            }
        },
        methods :{
            getAdDetail () {
                GetAdDetail({
                    id : this.$route.params.id
                }).then(res => {
                    this.orderInfo = res.result;
                })
            },
            toUserDetail(userId) {
                this.$router.push('/user-info/' + userId)
            },
            //cny转code
            number2coinHandle () {
                this.number2coin = (Number(this.number) / Number(this.orderInfo.price)).toFixed(2)
            },
            coin2numberHandle () {
                this.number = (Number(this.number2coin) * Number(this.orderInfo.price)).toFixed(2)
            },
            createOrder () {
                CreateTradeOrder({
                    id : this.$route.params.id,
                    number : this.number2coin
                }).then(res => {
                    this.$alert('下單成功', '提示', {
                        callback : _ => {
                            this.$router.push('/my-order')
                        }
                    })
                })
            }
        }
    }
</script>
<style lang="less" scoped>
    @import url('../../assets/css/_b.less');
    @media screen and (max-width : 670px) {
        .ad-detail {
            background: #fff;
            padding: 10px;
            .left {
                header {
                    padding: 10px;
                    border-bottom: 1px solid @borderColor;
                    img {
                        width: 45px;
                        height: 45px;
                        border-radius: 50%;
                        margin-right: 10px;
                    }
                    .user-info {
                        p {
                            margin-bottom: 10px;
                        }
                    }
                    .contact {
                        width: 80px;
                    }
                }
                .ad-inf {
                    padding: 10px;
                    h1 {
                        font-family: PingFang SC,sans-serif;
                        font-size: 15px;
                        margin-top: 15px;
                        margin-bottom: 30px;
                        color: #092a44;
                        font-weight: bold;
                    }
                    .el-form-item {
                        margin-bottom: 0px;
                    }
                    .ad-msg {
                        font-size: 18px;
                        font-weight: bold;
                    }
                    h2 {
                        font-size: 18px;
                        margin-bottom: 15px;
                    }
                    .el-button {
                        margin-top: 15px;
                        width: 100%;
                    }
                    .trade-number {
                        border-top: 1px solid @borderColor;
                        h1 {
                            font-size: 14px;
                            font-weight: normal;
                            margin-bottom: 10px;
                            border-left: 4px solid @mainColor;
                            padding-left: 15px;
                        }
                        p {
                            margin: 10px;
                        }
                        .number-input {
                            border: 1px solid @borderColor;
                            padding: 0 10px;
                            .item {
                                padding: 10px 0;
                                &:nth-child(1){
                                    border-bottom: 1px solid @borderColor;
                                }
                                .f-s();
                                
                                .el-input {
                                    margin :0;
                                }
                                span {
                                    width: 120px;
                                }
                            }
                        }
                    }
                }
                // 交易须知
                .trade-notice {
                    padding: 20px;
                    border-top: 1px solid @borderColor;
                    color: #78889e;
                    h1 {
                        font-size: 15px;
                        margin-bottom: 8px;
                    }
                    p {
                        font-size: 12px;
                        margin-bottom: 8px;
                    }
                }
            }
            .right {
                border-top: 1px solid @borderColor;
                flex: 1;
                padding: 20px;
                h1 {
                    font-size: 15px;
                    font-weight: bold;
                    color: #707987;
                    margin-bottom: 20px;
                }
                p {
                    font-size: 14px;
                    color: #78889e;
                }
            }
            .contact-saler {
                position: fixed;
                top: 60px;
                left: 0;
                width:  ~"calc(100% - 30px)";;
                height: 100%;
                z-index: 1987;
                background: #fff;
                padding: 15px 15px 0 15px;
                box-shadow: 0 4px 8px 0 rgba(225, 234, 240, 0.8);
                border-bottom: 1px solid @borderColor;
            }
        }
    }
    @media screen and (min-width : 670px) {
        .ad-detail {
            
            width: 1300px;
            margin: 30px auto;
            display: flex;
            justify-content: flex-start;
            .left,.right {
                background: #fff;
                box-shadow: 0 4px 8px 0 rgba(225, 234, 240, 0.8);
            }
            .left {
                padding: 0 10px;
                width: 860px;
                margin-right: 20px;
                
                header {
                    padding: 20px;
                    cursor: pointer;
                    border-bottom: 1px solid @borderColor;
                    img {
                        width: 45px;
                        height: 45px;
                        border-radius: 50%;
                        margin-right: 10px;
                    }
                    .user-info {
                        .s-b();
                        width: 400px;
                        text-align: center;
                    }
                }
                .ad-inf {
                    padding: 20px;
                    h1 {
                        font-size: 24px;
                        font-weight: bold;
                        margin-bottom: 15px;
                    }
                    .el-form-item {
                        margin-bottom: 20px;
                        
                    }
                    .ad-msg {
                        font-size: 18px;
                    }
                    .unit-price {
                        font-weight: bold;
                    }
                    h2 {
                        font-size: 18px;
                        margin-bottom: 15px;
                    }
                    .el-button {
                        margin-top: 15px;
                        width: 120px;
                    }
                }
                .other-ad{
                    padding: 20px;
                    border-top: 1px solid @borderColor;
                }
                .trade-notice {
                    padding: 20px;
                    border-top: 1px solid @borderColor;
                    color: #78889e;
                    h1 {
                        font-size: 15px;
                        margin-bottom: 8px;
                    }
                    p {
                        font-size: 12px;
                        margin-bottom: 8px;
                    }
                }
            }
            .right {
                flex: 1;
                padding: 20px;
                h1 {
                    font-size: 15px;
                    font-weight: bold;
                    color: #707987;
                    margin-bottom: 20px;
                }
                p {
                    font-size: 14px;
                    color: #78889e;
                }
            }
            .contact-saler {
                position: fixed;
                top: 174px;
                left: 1009px;
                z-index: 1987;
                width: 360px;
                background: #fff;
                padding: 15px 15px 0 15px;
                box-shadow: 0 4px 8px 0 rgba(225, 234, 240, 0.8);
                border-bottom: 1px solid @borderColor;
            }
        }
    }
</style>